<template>
  <div :visible="visible">
    <a-row>
      <a-col :span="4">
        <div class="img-box">
          <img src="" alt="" />
        </div>
      </a-col>
      <a-col :span="20">
        <a-descriptions size="small" bordered :column="2">
          <a-descriptions-item v-for="item in departmentColums" :key="item.key" :label="item.label">
            <template v-if="item.label == '主责主业'">
              <!-- 文本展开/收起逻辑 -->
              <span ref="textContent" :class="{ collapsed: !isExpanded }">
                {{ fullText }}
              </span>
              <div class="expand-button" v-if="!showExpand" type="link" @click="toggleExpanded">
                {{ isExpanded ? '收起' : '展开' }}
              </div>
            </template>
            <template v-else>
              {{ model[item.key] }}
            </template>
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
    </a-row>
    <div class="tabs-content">
      <div
        :class="['tabs-item', departmentActiveKey == item.key && 'tabs-item-act']"
        v-for="item in departmentTabs"
        :key="item.key"
      >
        <span @click="clickTabsHandler(item)"> {{ item.label }}</span>
      </div>
    </div>
    <component :is="setComponent" />
  </div>
</template>
<script>
import { queryIdTree } from '@/api/api'
import { DepartmentColums, DepartmentTabs } from './component/infoTabs'
import LegalPersonInfo from './component/LegalPersonInfo.vue'
import HonorRecords from './component/HonorRecords.vue'
import BusinessPhilosophy from './component/BusinessPhilosophy.vue'
import CompanyDuties from './component/CompanyDuties.vue'
import DepartmentDuties from './component/DepartmentDuties.vue'
import DepartmentOverview from './component/DepartmentOverview.vue'
import CompanyTimeline from './component/CompanyTimeline.vue'
import EquityInfo from './component/EquityInfo.vue'
export default {
  name: 'DeptBaseInfo',
  components: {
    LegalPersonInfo,
    HonorRecords,
    BusinessPhilosophy,
    CompanyDuties,
    DepartmentDuties,
    DepartmentOverview,
    CompanyTimeline,
    EquityInfo
  },
  data() {
    return {
      departTree: [],
      id: '',
      model: {},
      visible: false,
      disable: true,
      treeData: [],
      labelCol: {
        xs: { span: 24 },
        sm: { span: 3 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      departmentColums: [],
      departmentActiveKey: '法人信息',
      departmentTabs: [],
      isExpanded: false, // 控制是否展开
      showExpand: false,
      fullText:
        '一般项目：创业投资（限投资未上市企业）；股权投资；对外承包工程；住房租赁；等等，内容很长需要展开收起一般项目：创业投资（限投资未上市企业）；股权投资；对外承包工程；住房租赁；等等，内容很长需要展开收起一般项目：创业投资（限投资未上市企业）；股权投资；对外承包工程；住房租赁；等等，内容很长需要展开收起一般项目：创业投资（限投资未上市企业）；股权投资；对外承包工程；住房租赁；等等，内容很长需要展开收起。'
    }
  },
  created() {
    this.loadTreeData()
    this.departmentColums = DepartmentColums(1)
    this.departmentTabs = DepartmentTabs(1)
    // todo 在组件挂载后检查文本是否超出 此处是模拟
    this.checkTextOverflow()
  },
  computed: {
    // 根据当前的 departmentActiveKey 返回需要渲染的组件
    setComponent() {
      switch (this.departmentActiveKey) {
        case '法人信息':
          return 'LegalPersonInfo'
        case '荣誉记录':
        case '部门荣誉':
        case '公司荣誉':
          return 'HonorRecords'
        case '经营理念':
          return 'BusinessPhilosophy'
        case '公司职责':
          return 'CompanyDuties'
        case '部门职责':
          return 'DepartmentDuties'
        case '部门概况':
          return 'DepartmentOverview'
        case '大事记':
          return 'CompanyTimeline'
        case '股权信息':
          return 'EquityInfo'
        default:
          return null
      }
    }
  },
  methods: {
    // 展开收起
    toggleExpanded() {
      this.isExpanded = !this.isExpanded
    },
    checkTextOverflow() {
      const element = this.$refs.textContent
      const maxLines = 1 // 最大显示行数
      const lineHeight = parseInt(window.getComputedStyle(element).lineHeight, 10)
      const maxHeight = lineHeight * maxLines

      // 如果内容的真实高度大于最大高度，则显示“展开”按钮
      if (element.scrollHeight > maxHeight) {
        this.showExpand = true
      }
    },
    loadTreeData() {
      queryIdTree().then(res => {
        if (res.success) {
          for (let i = 0; i < res.result.length; i++) {
            let temp = res.result[i]
            this.treeData.push(temp)
          }
        }
      })
    },
    open(record) {
      this.visible = true
      //update-begin---author:wangshuai ---date:20220211  for：[JTC-174]部门管理界面参考vue3的改改------------
      this.model = Object.assign({}, record)
      this.model.parentId = this.findTree(this.treeData, record.parentId)
      this.model.orgCategory = this.orgCategoryText(record.orgCategory)
      console.log(this.model.orgCategory)

      //update-end---author:wangshuai ---date:20220211  for：[JTC-174]部门管理界面参考vue3的改改------------
    },
    clearForm() {
      this.treeData = []
    },
    /**
     * 通过父id查找部门名称
     * @param treeList 树数组
     * @param id 父id
     * @return id对应的部门名称
     */
    findTree(treeList, id) {
      for (let i = 0; i < treeList.length; i++) {
        let item = treeList[i]
        //如果当前id和父id相同则返回部门名称
        if (item.key == id) {
          return item.title
        }
        let children = item.children
        //存在子部门进行递归查询
        if (children) {
          let findResult = this.findTree(children, id)
          //返回的数据不为空，结束递归，返回结果
          if (findResult) {
            return findResult
          }
        }
      }
    },
    /**
     * 将机构类型数值翻译成文本
     * @param orgCategory 部门类别
     * @return 部门类别对应的文本
     */
    orgCategoryText(orgCategory) {
      if (orgCategory == 1) {
        return '公司'
      } else if (orgCategory == 2) {
        return '部门'
      } else {
        return '岗位'
      }
    },
    // 点击了tabs
    clickTabsHandler(item) {
      this.departmentActiveKey = item.key
      console.log(this.setComponent)
    }
  }
}
</script>
<style scoped lang="less">
.info-box {
  display: flex;
}
.img-box {
  height: 116px;
  margin-right: 10px;
  background-color: #f00;
}
.tabs-content {
  display: flex;
  height: 40px;
  margin: 20px 0;
  align-items: center;
  background-color: #f4fcff;
  padding-left: 20px;
  .tabs-item {
    width: 25%;
    span {
      cursor: pointer;
    }
  }
  .tabs-item-act {
    color: #018ffb;
  }
}
.ant-descriptions-view {
  border: 1px solid #f0f0f0;
}
/deep/ .ant-descriptions-item-label {
  width: 180px;
}
/deep/ .ant-descriptions-item-content span {
  color: #000000d9;
}
/deep/ .ant-descriptions-bordered .ant-descriptions-row {
  border-bottom: 1px solid #f0f0f0 !important;
}
/deep/ .ant-descriptions-bordered .ant-descriptions-item-label {
  border-right: 1px solid #f0f0f0;
}
.collapsed {
  display: inline-block;
  max-width: 600px;
  white-space: nowrap; /* 确保文本在一行内显示 */
  overflow: hidden; /* 隐藏溢出的内容 */
  text-overflow: ellipsis; /* 使用省略号表示文本溢出 */
}
.expand-button {
  display: inline-block;
  color: #018ffb !important;
  cursor: pointer;
  margin-top: -10px;
  margin-left: 10px;
}
</style>

